import React, { Component } from "react";
import bgp from "../../images/bgp1.jpg";
import styles from "./Login.module.scss";
import { Toast } from "antd-mobile";
import { getCode, getLogin } from "../../data/api";
import { withRouter } from "react-router-dom";
class Login extends Component {
  state = {
    id: "",
    password: "",
    loginActive: true,
    codeClick: true,
    timeId: 60,
  };
  timeLose = () => {
    let that = this;
    setInterval(() => {
      that.setState((preState) => {
        return {
          timeId: --preState.timeId,
        };
      });
    }, 1000);
  };
  timeExist = () => {
    setTimeout(() => {
      this.setState({
        codeClick: true,
      });
    }, 60000);
  };
  handleGetId(e) {
    this.setState({
      id: e.target.value,
    });
  }
  handleGetPassword(e) {
    this.setState({
      password: e.target.value,
    });
  }
  handleChangeActive = () => {
    if (this.state.loginActive === true) {
      this.setState({
        loginActive: false,
      });
    } else {
      this.setState({
        loginActive: true,
      });
    }
  };
  handleGetCode = async () => {
    let res = await getCode(this.state.id);
    console.log(res);
    this.setState({
      codeClick: false,
    });
    this.timeExist();
    this.timeLose();
  };
  handleSubmit = async () => {
    let res = await getLogin(this.state.id, this.state.password);
    console.log(res);
    if (res.success) {
      localStorage.setItem("token", res.data.token);
      this.props.history.push("my");
      console.log(res.data);
      localStorage.setItem("user", JSON.stringify(res.data.user));
    } else {
      Toast.info("账号或密码错误！");
    }
  };
  render() {
    return (
      <div className={styles.xmLogin}>
        <div className={styles.loginBgp}>
          <img src={bgp} alt="" />
        </div>
        <div className={styles.loginUserName}>
          <span>*</span>账号：
          <input
            type="text"
            id={styles.username}
            onBlur={(e) => this.handleGetId(e)}
            placeholder="请输入手机号"
          ></input>
        </div>
        {this.state.loginActive ? (
          <div>
            <div className={styles.loginPassword}>
              <span>*</span>密码：
              <input
                type="text"
                id={styles.password}
                onBlur={(e) => this.handleGetPassword(e)}
                placeholder="请输入密码"
              ></input>
            </div>
            <div className={styles.loginSubmit} onClick={this.handleSubmit}>
              登录
            </div>
            <div className={styles.loginChange} onClick={this.handleChangeActive}>
              手机短信登录/注册
            </div>
          </div>
        ) : (
          <div>
            <div className={styles.loginPassword}>
              短信验证码：
              <input
                type="text"
                id={styles.password}
                onBlur={(e) => this.handleGetPassword(e)}
                placeholder="请输入短信验证码"
              ></input>
              {this.state.codeClick ? (
                <div className={styles.loginPhoneCode} onClick={this.handleGetCode}>
                  发送验证码
                </div>
              ) : (
                <div className={styles.wait60s}>{this.state.timeId}秒后重发</div>
              )}
            </div>
            <div className={styles.loginSubmit} onClick={this.handleSubmit}>
              立即登录/注册
            </div>
            <div className={styles.loginChange} onClick={this.handleChangeActive}>
              用户名密码登录
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default withRouter(Login);
